---
title: "Multi-Row Selection"
description: "Configure selection of multiple rows, checkbox selection, and group selection in the $framework Table."
---

Enable users to select many rows at once within a grid.

## Enabling Multi-Row Selection

To enable multi-row selection set `rowSelection.mode` to `'multiRow'`:

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: { 
        mode: 'multiRow' 
    }
}
```

The following example illustrates a basic multi-row selection configuration.

{% gridExampleRunner title="Enabling Row Selection" name="enabling-row-selection" /%}

Click checkboxes to select or deselect a row. Alternatively, you can do this via the keyboard by focusing the row and pressing the {% kbd "␣ Space" /%} key.
Users can hold {% kbd "⇧ Shift" /%} and then click a checkbox to add a range of adjacent rows to the selection.

Ranges of rows can be selected by holding down {% kbd "⇧ Shift" /%} while clicking on checkboxes. 
This behaviour also applies when [Click Selection](#enable-click-selection--deselection) is enabled, and in [Group Selection](./grouping-row-selection).

## Removing Selection Checkboxes

To prevent any row selection checkboxes from being rendered in rows, set `rowSelection.checkboxes` to `false`. 
To prevent the header checkbox from being rendered, set `rowSelection.headerCheckbox` to `false`.
Setting both to `false` will disable the checkbox column. You will also need to enable click selection by setting `enableClickSelection: true`.

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        checkboxes: false,
        headerCheckbox: false,
        enableClickSelection: true,
    }
}
```

{% gridExampleRunner title="Checkbox Selection" name="checkbox-selection" /%}

{% note %}
You may pass a function to `rowSelection.checkboxes` to dynamically enable or disable checkboxes for given rows.
For rows where both `isRowSelectable` and `rowSelection.checkboxes` return `false`, checkboxes will be hidden, rather than disabled.
{% /note %}

## Configure Selectable Rows

It is possible to specify which rows can be selected via the `rowSelection.isRowSelectable` callback function.

For instance if we only wanted to allow selection for rows where the 'year' property is less than 2007, we could implement the following:

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        isRowSelectable: (rowNode) => rowNode.data ? rowNode.data.year < 2007 : false,
    }
}
```

Rows for which `isRowSelectable` returns `false` cannot be selected at all, whether using the UI or the API.

{% gridExampleRunner title="Checkbox Selection: Hiding Disabled Checkboxes" name="checkbox-selection-disable-checkboxes" /%}

Note that this example uses `hideDisabledCheckboxes` to hide disabled checkboxes, which can be toggled on or off. 

## Selecting All Rows

All rows may be selected at once by using the header checkbox, which is enabled by default in `'multiRow'` mode.

The three possible values of `rowSelection.selectAll` are:
- `'all'`: _(Default)_ Selecting the header checkbox selects all [selectable](#configure-selectable-rows) rows in the grid.
- `'filtered'`: Selecting the header checkbox will select all rows that satisfy the currently active filter.
- `'currentPage'`: Selecting the header checkbox will select all rows that satisfy the currently active filter on the current page.

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: { 
        mode: 'multiRow',
        selectAll: 'filtered'
    }
}
```

The example below demonstrates the three different modes available for `rowSelection.selectAll`:

{% gridExampleRunner title="Header Checkbox Selection" name="header-checkbox" /%}

Note that when `rowSelection.isRowSelectable` is defined, the header checkbox will only select selectable rows.

{% note %}
The value of `rowSelection.selectAll` does not affect group selection behaviour, which is controlled by `rowSelection.groupSelects`. 
See [Row Grouping - Selecting Groups](./grouping-row-selection) for more on this.
{% /note %}

## Customising the Checkbox Column
The checkbox column may be customised in a similar way to any other column, by specifying its column definition in the `selectionColumnDef` grid option.

{% apiDocumentation source="grid-options/properties.json" section="selection" names=["selectionColumnDef"] /%}

The `SelectionColumnDef` allows for a great deal of customisation, including custom renderers, sorting, tooltips and more.
The example below demonstrates the following configuration:
- allowing sorting using the default sort order (selected first) via the header
- changing the default width of the column
- allowing resizing
- pinning it to the left

```{% frameworkTransform=true %}
const gridOptions = {
    selectionColumnDef: {
        sortable: true,
        resizable: true,
        width: 120,
        suppressHeaderMenuButton: false,
        pinned: 'left',
    }
}
```

{% gridExampleRunner title="Customising Checkbox Column" name="customise-checkbox-column" /%}

{% note %}
When sorting by the checkbox column, selecting a new row will not automatically update the row order, see [Change Detection](./change-detection/#change-detection-and-sorting-filtering-grouping)
for more information.
{% /note %}

{% note %}
The checkbox column is sized statically, and is therefore not affected by [Auto-Sizing](./column-sizing/#auto-sizing-columns).
{% /note %}

## Enable Click Selection & Deselection

The `rowSelection.enableClickSelection` property configures whether a row's selection state will be impacted when the row is clicked, or when {% kbd "␣ Space" /%} is pressed while the row is focused.

{% interfaceDocumentation interfaceName="MultiRowSelectionOptions" names=["enableClickSelection"] config={"description": ""}/%}

This is typically used when [Checkbox Selection](#removing-selection-checkboxes) is disabled, though both can be enabled simultaneously if desired. 
Click-selection and deselection can be enabled by setting `enableClickSelection` to `true`, otherwise they may be enabled separately using the values `'enableSelection'` and `'enableDeselection'`.

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: { 
        mode: 'multiRow',
        enableClickSelection: true,
    }
}
```

The example below demonstrates the three possible configurations for this property, as well as the behaviour when it is disabled. Use the select element to switch between modes.

{% gridExampleRunner title="Disable Click Selection" name="suppress-click-selection" /%}

{% note %}
Note that deselection is still possible when checkboxes are enabled by clicking a selected checkbox.
{% /note %}

## Force Checkboxes to be Selected

It is possible to select a row via the Grid API and disable its checkbox to prevent users from deselecting it. 
This can be achieved by providing a function to `rowSelection.checkboxes`.

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        checkboxes: (params) => params.data && params.data.year === 2012,
    },
    onFirstDataRendered: (params) => {
        const nodesToSelect = [];
        params.api.forEachNode((node) => {
            if (node.data && node.data.year <= 2008 && node.data.year >= 2004) {
                nodesToSelect.push(node);
            }
        });
        params.api.setNodesSelected({ nodes: nodesToSelect, newValue: true });
    },
}
```

In the example below only rows with Year equal to 2012 can be selected or deselected by the user.
Clicking the header checkbox, however, will select all rows even if their checkboxes are disabled.

{% gridExampleRunner title="Force Checkboxes to be Selected" name="force-enable-checkboxes" /%}

## Selecting Multiple Rows without Ctrl key

In certain circumstances, especially in the context of touchscreen devices, users may want to select multiple rows without having to use the {% kbd "^ Ctrl" /%} key.

This can be accomplished by setting the `rowSelection.enableSelectionWithoutKeys` flag to `true`. You will also need to set `enableClickSelection` to `true`.

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        checkboxes: false,
        headerCheckbox: false,
        enableSelectionWithoutKeys: true,
        enableClickSelection: true,
    },
}
```

Click multiple rows in the example below without pressing any keyboard keys to explore this behaviour.

{% gridExampleRunner title="Multi-select without Keyboard modifiers" name="multi-select-with-click" /%}

## API Reference

See the full list of configuration options available in `'multiRow'` mode.

{% interfaceDocumentation interfaceName="MultiRowSelectionOptions" config={"description":""} /%}

## Next up

Row selection can be used when using row grouping, tree data and the server-side row model. See the respective sections of the documentation:

- [Row Group Selection](./grouping-row-selection)
- [Tree Data Selection](./tree-data-selection)
- [Server-Side Row Model Selection](./server-side-model-selection)

Continue to the next section to see the [Row Selection API reference](./row-selection-api-reference).
